<template>
	<view class="content">
		<image class="bg" src="https://picsum.photos/id/1035/375/500"></image>
		<view class="box">
			<view class="list" hover-class="hover-class" @click="nextPage('/pages/waterfallFlowPage/index1')">瀑布流实现方式1</view>
			<view class="list" hover-class="hover-class" @click="nextPage('/pages/waterfallFlowPage/index2')">瀑布流实现方式2</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		methods: {
			nextPage(path){
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 750rpx;
		height: max-content;
		box-sizing: border-box;
	}
	.bg{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
	}
	.box{
		width: 450rpx;
		height: 210rpx;
		position: fixed;
		top: calc(50% - 105rpx);
		left: calc(50% - 225rpx);
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
	}
	.list{
		width: 100%;
		height: 90rpx;
		border-radius: 20rpx;
		background-color: #9cbbff;
		text-align: center;
		line-height: 90rpx;
		color: azure;
		letter-spacing: 7rpx;
	}
	.hover-class{
		opacity: .8;
	}
</style>
